<template>
    <div id="editGongyingshang">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>供应商管理</el-tag>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>编辑供应商信息</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="form">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="供应商">
                <el-input v-model="form.gname"></el-input>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="form.dizhi"></el-input>
              </el-form-item>
               <el-form-item>
                  <el-button type="primary" @click="onSubmit">立即修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
   import {getEditGongyingshang,editGongyingshang} from './../../../service/api/index.js'
  export default {
          data() {
            return {
                 form:{
                   gname:'',
                   phone:'',
                   email:'',
                   dizhi:'',
                 }

            };
          },


          created(){
           //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
             getEditGongyingshang(this.$route.params.gid).then((response)=>{
                 console.log(response);
                 if (response.success) {
                      this.form.gname = response.data.gname;
                      this.form.phone = response.data.phone;
                      this.form.email = response.data.email;
                      this.form.dizhi = response.data.dizhi;
                  }
               }).catch(error=>{
                    // todo......
                  console.log(error);
             })   //---catch
          }, // ----created


            mounted(){
              console.log(this.$route.params.gid);
            },

        methods: {
          async onSubmit() {
              let result = await editGongyingshang(this.$route.params.gid,this.form.gname,this.form.phone,this.form.email,this.form.dizhi);      
              //console.log(result);
                 if (result) {
                     this.$message({
                        message: '修改成功',
                        type: 'success',
                      });
                     //跳转到供应商列表页面
                     this.$router.push({name:'gongyingshangList'});
                 }
            }
        }
  }
</script>>
<style lang="less" scope>
   #editGongyingshang{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }

    .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
    
    .form{
      margin-left: 4rem;
      margin-right: 4rem;
   }
</style>